<template>
  <div style="background: #ECECEC; padding: 30px">
    <a-row :gutter="16">
      <a-col :span="12">
        <a-statistic-countdown
          title="Countdown"
          :value="deadline"
          @finish="onFinish"
          style="margin-right: 50px"
        />
      </a-col>
      <a-col :span="12">
        <a-statistic-countdown
          title="Million Seconds"
          :value="deadline"
          format="HH:mm:ss:SSS"
          style="margin-right: 50px"
        />
      </a-col>
      <a-col :span="24" style="margin-top: 32px;">
    <a-statistic-countdown title="Day Level" :value="deadline" format="D 天 H 时 m 分 s 秒" />{{deadline}}
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card>
          <a-statistic
            title="本月订单数"
            :value="ordercount"
            :precision="2"
            suffix="%"
            :valueStyle="{color: '#3f8600'}"
            style="margin-right: 50px"
          >
            <template v-slot:prefix>
              <a-icon type="arrow-up" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-statistic
            title="本月总订单收入"
            :value="moneycount"
            :precision="2"
            suffix="%"
            valueClass="demo-class"
            :valueStyle="{ color: '#cf1322' }"
          >
            <template v-slot:prefix>
              <a-icon type="arrow-down" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      month:"十月",
      ordercount:"",
      moneycount:"",
      deadline: Date.now() 
    };
  },
  mounted() {
    this.open();
  },
  methods: {formatDateTime1(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d;
    },
    getSearchTime() {
      var mySelectMonth = this.selectTime.getMonth();
      var mySelectYear = this.selectTime.getFullYear();
      if (
        mySelectMonth == this.timeNowMonth &&
        mySelectYear == this.timeNowYear
      ) {
        var monthStartDate = new Date(mySelectYear, mySelectMonth, 1);
        var monthEndDate = new Date();
        console.log(new Date());
      } else {
        var monthStartDate = new Date(mySelectYear, mySelectMonth, 1);
        var monthEndDate = new Date(mySelectYear, mySelectMonth + 1, 0);
      }

      console.log(monthStartDate);
      console.log(monthEndDate);

      this.month=monthEndDate
      this.myMonthStartDate = this.formatDateTime1(monthStartDate);
      this.myMonthEndDate = this.formatDateTime1(monthEndDate);
      this.getBeforeDaysAllMoney();
      this.getOrdersInDate();
    },
    getBeforeDaysAllMoney() {
      this.$axios
        .get(
          "/ssms/admin/order/getBeforeDaysAllMoney",
          {
            params: {
              startDate: this.myMonthStartDate,
              endDate: this.myMonthEndDate
            }
          },
          {
            headers: {
              "Content-Type": "application/json",
              responseType: "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data);
          if (res.data.code === 0) {
            this.myTotalMoney = res.data.obj;
          }
        });
    },
    getOrdersInDate() {
      this.$axios
        .get(
          "/ssms/admin/order/getOrdersInDate",
          {
            params: {
              startDate: this.myMonthStartDate,
              endDate: this.myMonthEndDate
            }
          },
          {
            headers: {
              "Content-Type": "application/json",
              responseType: "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data);
          if (res.data.code === 0) {
            this.orderData = res.data.obj;
          }
        });
    },
    onFinish() {
      console.log("over");
    },
    open() {
      const h = this.$createElement;

      this.$notify({
        title: "欢迎光临",
        message: h("i", { style: "color: teal" }, "欢迎进入瑞豪酒店管理平台"),
        offset: 200
      });
    }
  }
};
</script>